<template>
  <div class="box">
      <div class="head">

      </div>
      <div class="content">
  <pull-to :top-load-method="refresh">
        <div class="adsense_list">

            <!-- v-for="(item,index) in this.arr" :key="index" -->

              <div v-for="(item,index) in this.arr" :key="index" >

                <div v-if="item.res_name!=undefined&&item.goods_status==10">
                  <div class="list">
                      <img :src="item.avatar_head" class="list_photo">
                      <div class="list_box">
                        <span class="list_name">{{item.nickname}}</span>
                        <!-- <div class="list_line"></div> -->
                        <!-- <span class="list_occupation">销售经理</span> -->
                        <div class="list_trade">{{item.industry_name}}</div>
                      </div>
                      <span class="list_time"></span>
                      <span class="list_activity">还未发布广告</span>
                      <span class="list_adsense">{{item.goods_name}}</span>
                      <div class="lista">未设置</div>
                  </div>
                </div>

                <div v-else-if="item.res_name==undefined">
                    <div class="div">
                        {{item.goods_name}}还未抢占
                    </div>
                </div>

                <div v-else>
                  <div class="list">
                      <img :src="item.avatar_head" class="list_photo">
                      <div class="list_box">
                        <span class="list_name">{{item.nickname}}</span>
                        <!-- <div class="list_line"></div> -->
                        <!-- <span class="list_occupation">销售经理</span> -->
                        <div class="list_trade">{{item.industry_name}}</div>
                      </div>
                      <span class="list_time"></span>
                      <span class="list_activity">{{item.res_name}}</span>
                      <span class="list_adsense">{{item.goods_name}}</span>
                      <img :src="item.obj_url" class="list_picture">
                  </div>
                </div>

              </div>


          </div>
  </pull-to>
      </div>

  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/adv/mylist';
      var obj={
        user_id:this.$route.query.userid
      }
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          //console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    refresh(loaded) {
      setTimeout(() => {
      //  this.dataList.reverse();
        this.getData()
        loaded('done');
      }, 200);
    }
  }
}

</script>
<style lang="scss" scoped>
// .head{
//   width:100%;
//   height:0.4rem;
//   background:rgb(247,247,247);
//   position:fixed;
//   top:0;
//   z-index: 2;
// }
.box{
  width:100%;
  height:100%;
  background:rgb(247,247,247);
  position:fixed;
}
img{ pointer-events: none;vertical-align: sub;}
.content{
  width:100%;
  //height:100%;
  position:fixed;
  top:0.17rem;
  position:relative;
  z-index: 1;
  .adsense_list{
    width:100%;
    //height:1rem;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    // position: absolute;
    // top:0.15rem;
    // left:0.08rem;
    .list:nth-of-type(4){
      margin-bottom:0.7rem;
    }
    .list{
      width:3.6rem;
      height:1.05rem;
      background:#FFFFFF;
      position:relative;
      border-bottom: 0.01rem solid #EEEEEE;
      border-radius: 0.05rem;
      margin-bottom: 0.1rem;
      .list_photo{
        width:0.21rem;
        height:0.21rem;
        position: absolute;
        top:0.12rem;
        left:0.15rem;
        border-radius:50%;
      }
      .list_box{
        width:1.7rem;
        display:flex;
        position: absolute;
        top:0.16rem;
        left:0.44rem;
        .list_name{
          max-width:0.9rem;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          height:0.2rem;
          line-height: 0.2rem;
          color:#636363;
          font-size:0.12rem;
        }
        .list_line{
          width:0.01rem;
          height:0.11rem;
          background:#EEEEEE;
          margin-left:0.04rem;
          margin-top:0.03rem;
        }
        .list_occupation{
          color:#636363;
          font-size:0.12rem;
          margin-left:0.04rem;
        }
        .list_trade{
          height:0.14rem;
          line-height:0.16rem;
          padding:0 0.03rem 0 0.03rem;
          background:rgb(227,250,246);
          color:#46DCC3;
          font-size:0.1rem;
          margin-left:0.06rem;
        }
      }
      .list_time{
        color:#636363;
        font-size:0.1rem;
        position: absolute;
        top:0.18rem;
        left:2.4rem;
      }
      .list_activity{
        color:#1B1B1B;
        font-size:0.15rem;
        font-weight: bold;
        position: absolute;
        top:0.46rem;
        left:0.17rem;
      }
      .list_adsense{
        color:#FF7928;
        font-size:0.1rem;
        position: absolute;
        top:0.82rem;
        left:0.17rem;
      }
      .list_picture{
        width:0.56rem;
        height:0.56rem;
        position: absolute;
        top:0.38rem;
        left:2.87rem;
        border-radius:0.05rem;
      }
      .lista{
        width:0.56rem;
        height:0.56rem;
        position: absolute;
        top:0.38rem;
        left:2.87rem;
        border-radius:0.05rem;
        background:rgb(238,238,238);
        color:#B0B0B0;
        font-size:0.15rem;
        display:flex;
        justify-content:center;
        align-items: center;
      }
    }
  }
}
.div{
  width:3.6rem;
  height:1.05rem;
  background:#EEEEEE;
  display:flex;
  justify-content: center;
  align-items:center;
  color:#B0B0B0;
  font-size:0.15rem;
  border-radius:0.05rem;
  margin-bottom:0.1rem;
}
</style>
